<template>
  <div id="pmhxt"></div>
</template>

<script>
import { defineComponent, ref, onMounted, computed, nextTick } from "vue";
export default defineComponent({
  name: "Pmhxt",
});
</script>
<script setup>
import * as echarts from "echarts";
import imageBase64Data from "./base64.json";

// data
const pmhxtData = ref([
  { value: 8.33, name: "ORP", percent: "10%", color: "rgba(179, 201, 213, 1)" },
  { value: 8.33, name: "温度", percent: "15%", color: "rgba(238, 62, 62, 1)" },
  { value: 8.33, name: "氮磷", percent: "15%", color: "rgba(251, 154, 85, 1)" },
  { value: 8.33, name: "余氯", percent: "30%", color: "rgba(42, 130, 228, 1)" },
  { value: 8.33, name: "PH", percent: "10%", color: "rgba(107, 217, 141, 1)" },
  { value: 8.33, name: "浊度", percent: "20%", color: "rgba(146, 35, 147, 1)" },
]);

const pmhxtSeriesDataComp = computed(() => {
  let retArr = [];
  pmhxtData.value.forEach((item) => {
    let obj = {};
    obj.value = item.value;
    obj.name = item.name;
    obj.percent = item.percent;
    retArr.push(obj);
  });
  return retArr;
});
// pmhxt Color Comp
const pmhxtColorComp = computed(() => {
  let retArr = [];
  pmhxtData.value.forEach((item) => {
    retArr.push(item.color);
  });
  return retArr;
});

nextTick(() => {
  let imgBase64Url = imageBase64Data.imgBase64url;
  let dom = document.getElementById("pmhxt");
  let myChart = echarts.init(dom);
  let option = {
    legend: { show: false },
    graphic: [
      {
        type: "image",
        style: {
          image: imgBase64Url,
          width: 125,
          height: 125,
        },
        left: "center",
        top: "center",
      },
    ],
    series: [
      {
        name: "入住科室分布",
        type: "pie",
        radius: ["60%", "80%"],
        avoidLabelOverlap: true,
        itemStyle: {
          normal: {
            borderColor: "black",
            borderWidth: 8,
          },
        },
        color: pmhxtColorComp.value,
        labelLine: {
          normal: {
            length: 25,
            lineStyle: {
              color: "rgba(99, 113, 128, 1)",
            },
          },
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
            rich: {
              a: {
                fontSize: 12,
                align: "left",
                color: "white",
                fontWeight: "bold",
                padding: [8, 0, 0, 18],
              },
              b: {
                fontSize: 12,
                align: "left",
                fontWeight: "bold",
                color: "rgba(38, 176, 255, 1)",
                padding: [8, 0, 0, 8],
              },
            },
          },
          labelLine: {
            lineStyle: {
              width: 2,
            },
          },
        },
        label: {
          alignTo: "labelLine", // ! 文字对齐方式
          formatter: function (e) {
            let {
              data: { name, percent },
            } = e;
            return `{x|}{a|${name}}\t{b|${percent}}`;
          },
          minMargin: -50,
          lineHeight: 15,
          rich: {
            a: {
              fontSize: 12,
              align: "left",
              color: "white",
              padding: [8, 0, 0, 18],
            },
            b: {
              fontSize: 12,
              align: "left",
              color: "rgba(38, 176, 255, 1)",
              padding: [8, 0, 0, 8],
            },
          },
        },
        data: pmhxtData.value,
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#pmhxt {
  width: 30vw;
  height: 30vh;
  background: black;
}
</style>
